<template>
    <div class="page-star">
        <div class="star mr-10" :style="starNumHeight">
            <span
                class="star-item"
                :style="{'margin-right': props.space + 'px'}"
                v-for="(itemClass, i) in itemClassess.result"
                :class="itemClass"
                :key="i"
                @click="starChange(i)">
                <i v-if="itemClass === 'off' || itemClass === 'on'" class="iconfont icon-a-jihuo1x" :style="starSizeStyle"></i>
                <span v-else :style="starNumHeight">
                    <i class="iconfont icon-a-jihuo1x" :style="starSizeStyle"></i>
                    <i class="iconfont icon-a-051x half-star" :style="starSizeStyle"></i>
                </span>
                
            </span>
        </div>
        <div v-if="itemClassess.scoreNum || disabled" :style="starNumStyle" class="scoreNum" >
           <div>{{ itemClassess.scoreNum }}分</div>  
        </div>
    </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const LENGTH = 5; // 星星个数
const CLS_ON = 'on'; // 满星状态
const CLS_HALF = 'half'; // 半星状态
const CLS_OFF = 'off'; // 无星状态

const props = defineProps({
    score: { // 分数
        type: [Number, String],
        default: 0
    },
    disabled: Boolean, // 是否禁用
    size: { // 星星大小
        type: Number,
        default: 0
    },
    scoreBold: { // 分数是否加粗
        type: Boolean,
        default: false
    },
    space: { // 评分间隔
        type: Number,
        default: 10
    }
});

const emit = defineEmits(['update:score']);

const itemClassess = computed(() => {
    let result = []; // 记录状态的数组
    let scoreNum = 0;
    let score = props.score;

    let integer = Math.floor(score); // 向下取整
    const hasDecimal = score - integer;

    // 全星
    for (let i = 0; i < integer; i++) {
        result.push(CLS_ON);
        scoreNum++;
    }
    // 半星
    if (hasDecimal && hasDecimal <= 0.5) {
        result.push(CLS_HALF);
        scoreNum += 0.5;
    } else if (hasDecimal) {
        result.push(CLS_ON);
        scoreNum++;
    }
    // 无星
    // console.log('result.length < LENGTH', LENGTH - result.length);
    if (result.length < LENGTH) {
        const resultNum = LENGTH - result.length;
        for (let i = 0; i < resultNum; i++) {
            result.push(CLS_OFF);
        }
    }
    return { result, scoreNum };
});

// 评分星星行高
const starNumHeight = computed(() => {
    return {
        lineHeight: props.size + 'px',
        height: props.size + 'px'
    };
});

// 评分星星样式 和启用禁用
const starSizeStyle = computed(() => {
    let style = {}
    if (props.size) {
        style.fontSize = props.size + 'px';
    } 
    style.cursor = props.disabled ? 'not-allowed' : 'pointer';
    return style;
});

// 评分分数样式
const starNumStyle = computed(() => {
    const data = {
        22: {
            fontSize: 16 + 'px',
            lineHeight: 22 + 'px',
            fontWeight: props.scoreBold ? 'bold' : 'solid'
        },
        26: {
            fontSize: 16 + 'px',
            lineHeight: 26 + 'px',
            fontWeight: props.scoreBold ? 'bold' : 'solid'
        },
        14: {
            fontSize: 14 + 'px',
            lineHeight: 14 + 'px',
            fontWeight: props.scoreBold ? 'bold' : 'solid'
        }
    };
    return data[props.size];
});

function starChange(num) {
    if (props.disabled) return;
    emit('update:score', num + 1);
}
</script>

<style lang="scss" scoped>
.star {
    display: flex;
}
.star .star-item {
    // margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}
.star .star-item:last-child {
    margin-right: 0px;
}
.star .star-item.on {
    color: #FFD44D;
}
.star .star-item.half {
    // color: #FFD44D;
    color: #EFF0F2;
    position: relative;
    .half-star {
        color: #FFD44D;
        position: absolute;
        left: 0;
        top: 0;
    }
}
.star .star-item.off {
    color: #EFF0F2;
}

.page-star {
    display: flex;
    align-items: center;
    .scoreNum {
        color: var(--srt-main-text-color);
        margin-left: 10px;
    }
}


</style>
